<template>
  <el-row>
    <el-col 
      v-for="(col, colIndex) in processedColumns"
      :key="colIndex" 
      :span="8"
    >
      <!-- 将渐变背景应用到整个列容器 -->
      <div 
        class="career-chart"
        :style="{
          background: `linear-gradient(to bottom, ${getColumnGradient(colIndex)})`
        }"
        @click="openSalaryDialog(colIndex)" 
      >
        <div 
          v-for="(item, index) in col" 
          :key="index"
          class="row"
          :style="{
            height: `${item.height}px`,
            fontSize: `${item.fontSize}px`
          }"
        >
          <div class="content-wrapper">
            <div class="level">{{ item.level }}</div>
            <div class="title">{{ item.title }}</div>
            <div class="salary">{{ item.salary }}</div>
          </div>
        </div>
      </div>
    </el-col>

     <!-- 添加弹窗组件 -->
    <el-dialog
      v-model="dialogVisible"
      title="薪酬详情"
      width="600px"
      :before-close="handleClose"
    >
      <!-- 嵌入薪酬展示组件 -->
      <XinZhiFenXi :salaryData="currentSalaryData" />
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </el-row>
</template>


// ... existing code ...
<script>
import { ref, watch, computed } from 'vue';
import XinZhiFenXi from './XinZhiFenXi.vue'; // 导入薪酬展示组件
import { CampatydataApi } from '../utils/api'; // 导入API

export default {
  components: {
    XinZhiFenXi
  },
  props: {
    selectedCompanies: {
      type: Object,
      default: () => ({})
    }
  },
  setup() {
    const dialogVisible = ref(false);
    const currentSalaryData = ref(null);
    const companySalaryData = ref([]);
    
    // 打开弹窗方法
    const openSalaryDialog = (colIndex) => {
      console.log('打开弹窗，索引:', colIndex, '数据:', companySalaryData.value[colIndex]);
      if (companySalaryData.value[colIndex]) {
        currentSalaryData.value = companySalaryData.value[colIndex];
        dialogVisible.value = true;
      }
    };

    // 关闭弹窗前处理
    const handleClose = (done) => {
      done();
    };

    return {
      dialogVisible,
      currentSalaryData,
      companySalaryData,
      openSalaryDialog,
      handleClose
    };
  },
  data() {
    return {
      // 移除了不再使用的 positions 数组
    };
  },
  computed: {
    // 根据API返回的数据动态生成columns
    processedColumns() {
      console.log('开始处理columns，companySalaryData:', this.companySalaryData);
      if (!this.companySalaryData || this.companySalaryData.length === 0) {
        // 如果没有数据，返回默认数据
        console.log('没有API数据，使用默认数据');
        return [
          // 第一列
          [
            { level: "P5", title: "工程师", salary: "¥35-66万", height: 130, fontSize: 26 },
            { level: "P6", title: "高级工程师", salary: "¥48-64万", height: 120, fontSize: 24 },
            { level: "P7", title: "专家/经理", salary: "¥91-118万", height: 110, fontSize: 22 },
            { level: "P8", title: "高级专家/资深经理", salary: "¥170-240万", height: 100, fontSize: 20 },
            { level: "P9", title: "资深专家/总监", salary: "¥290-380万", height: 90, fontSize: 18 },
            { level: "P10", title: "研究员/资深总监", salary: "¥387-590万", height: 80, fontSize: 16 }
          ],
          // 第二列
          [
            { level: "P5", title: "工程师", salary: "¥35-66万", height: 140, fontSize: 26 },
            { level: "P6", title: "高级工程师", salary: "¥48-64万", height: 120, fontSize: 24 },
            { level: "P7", title: "专家/经理", salary: "¥91-118万", height: 110, fontSize: 22 },
          ],
          // 第三列
          [
            { level: "P5", title: "工程师", salary: "¥35-66万", height: 130, fontSize: 26 },
            { level: "P6", title: "高级工程师", salary: "¥48-64万", height: 120, fontSize: 24 },
            { level: "P7", title: "专家/经理", salary: "¥91-118万", height: 110, fontSize: 22 },
            { level: "P8", title: "高级专家/资深经理", salary: "¥170-240万", height: 70, fontSize: 14 },
          ],
        ];
      }

      console.log('使用API数据生成columns');
      // 根据API返回的数据生成columns
      return this.companySalaryData.map((companyData, colIndex) => {
        console.log(`处理第${colIndex}列数据:`, companyData);
        if (!companyData || !companyData.levels) {
          console.log(`第${colIndex}列没有有效数据`);
          return [];
        }
        
        return companyData.levels.map((level, index) => {
          // 格式化薪资范围
          const minSalary = level.min_salary ? (level.min_salary / 10000).toFixed(0) : 0;
          const maxSalary = level.max_salary ? (level.max_salary / 10000).toFixed(0) : 0;
          const salaryRange = `¥${minSalary}-${maxSalary}万`;
          
          // 根据索引计算高度和字体大小
          const baseHeight = 130;
          const height = Math.max(60, baseHeight - index * 10);
          const fontSize = Math.max(10, 26 - index * 2);
          
          console.log(`处理level:`, level);
          return {
            level: level.level_code || '',
            title: level.level_name || '',
            salary: salaryRange,
            height: height,
            fontSize: fontSize
          };
        });
      });
    }
  },
  methods: {
    getColumnGradient(colIndex) {
      // 定义跨度一致且明显的三色渐变
      const gradients = [
       "#FF7B00, #FFB347",  // 橙色：深橙 → 浅橙
        "#1E6FC7, #6BB9F0",  // 蓝色：深蓝 → 天蓝
        "#27AE60, #A2E4B8"   // 绿色：深绿 → 浅绿
      ];
      return gradients[colIndex];
    },
    
    // 获取公司薪资统计数据
    async fetchSalaryDataForCompanies() {
      console.log('开始获取公司薪资数据:', this.selectedCompanies);
      
      if (!this.selectedCompanies || Object.keys(this.selectedCompanies).length === 0) {
        console.log('没有选中的公司');
        return;
      }
      
      try {
        const salaryPromises = [
          this.selectedCompanies.first?.id ? 
            CampatydataApi.getSalaryStatsByCompanyId(this.selectedCompanies.first.id) : 
            Promise.resolve(null),
            
          this.selectedCompanies.second?.id ? 
            CampatydataApi.getSalaryStatsByCompanyId(this.selectedCompanies.second.id) : 
            Promise.resolve(null),
            
          this.selectedCompanies.third?.id ? 
            CampatydataApi.getSalaryStatsByCompanyId(this.selectedCompanies.third.id) : 
            Promise.resolve(null)
        ];
        
        const results = await Promise.all(salaryPromises);
        console.log('获取到的薪资数据:', results);
        
        this.companySalaryData = results;
      } catch (error) {
        console.error('获取薪资数据失败:', error);
      }
    }
  },
  
  watch: {
    // 监听选中公司的变化
    selectedCompanies: {
      handler(newVal) {
        console.log('选中的公司发生变化:', newVal);
        this.fetchSalaryDataForCompanies();
      },
      deep: true
    }
  },
  
  mounted() {
    console.log('SalaryComparison 组件已挂载，selectedCompanies:', this.selectedCompanies);
  }
};
</script>
// ... existing code ...


<style>
.career-chart {
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* 移除单个row的背景色，让列容器的渐变显示出来 */
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
  position: relative;
  /* 添加半透明白色背景，使文字更清晰 */
  background-color: rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.row:hover {
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.5);
}

.level {
  font-weight: bold;
  letter-spacing: 1px;
  /* margin-bottom: 5px; */
}

.title {
  margin-bottom: 5px;
}

.salary {
  font-weight: bold;
  color: #5c3d00;
  letter-spacing: 1px;
}

/* 响应式设计 */
@media (max-width: 840px) {
  .career-chart {
    width: 95%;
  }
  
  .row {
    height: auto !important;
    padding: 15px 10px !important;
  }
}
</style>